<!DOCTYPE html>
<html>

<head>
 <script  type="module" src="./pdf.mjs"></script>
  <script type="module" src="./pdf.worker.mjs"></script>
<!--  <script  type="module" src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/4.9.155/pdf.min.mjs"></script>
  <script type="module" src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/4.9.155/pdf.worker.mjs"></script> -->
  
</head>

<body>

  <!--    <canvas id="pdfCanvas"></canvas>

   <script>
      document.addEventListener('DOMContentLoaded', async () => {
          const url = 'http://192.168.20.221:1318/pdf/%E7%99%BD%E8%A1%A3%E5%89%91%E4%BB%991.pdf';  // 替换成实际的PDF文件路径，可以是相对路径或绝对路径
          const loadingTask = pdfjsLib.getDocument(url);
          const pdf = await loadingTask.promise;
          const pageNumber = 2;  // 这里先显示第一页，你可以根据需求调整显示的页面序号
          const page = await pdf.getPage(pageNumber);
          const viewport = page.getViewport({ scale: 1 });
          const canvas = document.getElementById('pdfCanvas');
          const context = canvas.getContext('2d');
          canvas.height = viewport.height;
          canvas.width = viewport.width;
          await page.render({
              canvasContext: context,
              viewport: viewport
          }).promise;
      });
  </script> -->
  
  
  
  <div id="pdfContainer"></div>
  
      <script>
          // 这里放置加载和显示PDF的代码，此时基本能确保DOM已加载完成
          document.addEventListener('DOMContentLoaded', async () => {
              const url = './pdf/%E7%99%BD%E8%A1%A3%E5%89%91%E4%BB%991.pdf';
              const loadingTask = pdfjsLib.getDocument(url);
              const pdf = await loadingTask.promise;
              const numPages = pdf.numPages;
  
              for (let pageNumber = 1; pageNumber <= numPages; pageNumber++) {
                  const page = await pdf.getPage(pageNumber);
                  const viewport = page.getViewport({ scale: 1 });
  
                  const canvas = document.createElement('canvas');
                  canvas.height = viewport.height;
                  canvas.width = viewport.width;
                  const context = canvas.getContext('2d');
  
                  const container = document.getElementById('pdfContainer');
                  container.appendChild(canvas);
  
                  await page.render({
                      canvasContext: context,
                      viewport: viewport
                  }).promise;
              }
          });
      </script>
</body>

</html>